<template>
  <div v-on:click="showAc()">
    <dc-row type="flex" justify="end" class="otinputitem mix1px" v-if="showtype==='haveicon'">
      <dc-col span="3" class="iconcan">
        <i :class="classes"></i>
      </dc-col>
      <dc-col span="19">
        <mt-field class="inputitem upcsrollitem"
                  :class="fieldclass"
                  v-bind:type="type"
                  v-bind:label="label"
                  v-bind:placeholder="placeholder"
                  v-model="valuelabel"
                  :readonly=true></mt-field>
      </dc-col>
      <dc-col span="2">
        <i class="icon iconfont icon-down iconposition"></i>
      </dc-col>
    </dc-row>
    <div v-if="showtype==='noicon'">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  /**
   * App component.
   * @module common/plugins/inputSelect
   * @author sea
   * @description 上拉选择组件，这个组件为了扩展选择组件，用的时候需要传入upscrolldata，
   * 这是一个数组，数组里面的每一个对象需要在外面，
   * 处理成对应的格式（格式可以参见下面的default数据）。
   * 为了适应没有图标的情况增加了一个入参showtype，传入字符串为 noicon 即可实现无图标模式
   * @example <inputSelect placeholder="请选择" type="text"
   iconName="icon-register-qiye"
   v-validate="{ rules: { required: true } }"
   name="企业形态"
   label="企业形态"
   :upscrolldata="companyType"
   v-model="companyTypesend"
   />
   */
  import {col, row} from '@/common/Flex';
  import {mapActions} from 'vuex';

  export default {
    data () {
      return {
        currentValue: this.value
      };
    },
    props: {
      value: {
        type: String,
        dafault: ''
      },
      iconName: String,
      label: {
        type: String,
        default: ''
      },
      type: String,
      placeholder: String,
      upscrolldata: {
        type: Array,
        default () {
          return [
            {
              label: 'hello',
              value: 123
            }
          ];
        }
      },
      showtype: {
        type: String,
        default: 'haveicon'
      }
    },
    components: {
      'dc-col': col,
      'dc-row': row
    },
    computed: {
      classes () {
        const oprateclass = ['icon', 'iconfont', 'iconsize'];
        if (this.iconName) {
          oprateclass.push(this.iconName);
        }
        return oprateclass;
      },
      fieldclass () {
        if (this.label !== '') {
          return ['fieldclass'];
        }
      },
      valuelabel: {
        get () {
          for (var i = 0; i < this.upscrolldata.length; i++) {
            if (this.currentValue === this.upscrolldata[i].value) {
              return this.upscrolldata[i].label;
            }
          }
        },
        set () {
          return this.valuelabel;
        }
      }
    },
    methods: {
      ...mapActions({
        setSheetAction: 'setSheetAction',
        setSheetVisible: 'setSheetVisible'
      }),
      showAc () {
        let setFunction = this.setSheetVisible;
        let self = this;
        this.setSheetAction(
          this.upscrolldata.map((item, i) => {
            return {
              name: item.label,
              value: item.value,
              method: function (result) {
                setFunction(false);
                // console.log('下拉选择完', result.value);
                self.currentValue = result.value;
              }
            };
          })
        );
      }
    },
    watch: {
      value (val) {
        // console.log('value变化', val);
        this.currentValue = val;
      },
      currentValue (val) {
        // console.log('currentValue变化', val);
        this.$emit('input', val);
      }
    }
  };
</script>
<style lang="scss">
  @import '../../../assets/css/variable';

  .upcsrollitem {
    .mint-field-core {
      background: #fff;
      // padding-right: px2rem(20px);
    }
  }

  .inputitem .mint-cell-wrapper {
    background-image: none;
  }

  .inputitem.mint-cell:last-child {
    background-image: none;
  }

  .fieldclass .mint-cell-wrapper .mint-cell-value input {
    text-align: right;
  }
</style>
<style lang="scss" scoped>
  @import '../../../assets/css/variable';

  .iconposition {
    line-height: px2rem(98px);
    color: #ccc;
    margin-left: - px2rem(40px);
  }

  .inputitem {
    margin-left: - px2rem(20px);
  }

  .iconcan {
    padding-top: 10px;
    color: #5e5f6e;
  }

  .iconsize {
    font-size: px2rem(48px);
  }

  .otinputitem {
    .mint-cell {
      background-color: inherit;
    }
  }
</style>
